<!--
* @Descripttion: (系统菜单)
* @version: 
* @Author: 
* @Date: 
* @LastEditors: 
* @LastEditTime: 
-->
<template>
    <div class="app-container">
        <el-row :gutter="20">
            <el-col :lg="4" :sm="24">
                <div class="head-container">
                    <el-input
                    v-model="treeFilterKeywords"
                    placeholder="请输入关键词"
                    clearable
                    prefix-icon="el-icon-search"
                    style="margin-bottom: 20px" 
                    />
                </div>
                <div class="head-container">
                    <el-tree :data="menuTreeOptions"
                    :props="defaultTreeProps"
                    :expand-on-click-node="false"
                    :filter-node-method="filterNode"
                    ref="tree"
                    default-expand-all
                    @node-click="handleNodeClick" 
                    />
                </div>
            </el-col>
            <!--用户数据-->
            <el-col :lg="20" :sm="24">
                <el-form :model="queryParams" size="small" label-position="right" inline ref="queryForm" v-show="showSearch" 
                        @submit.native.prevent>
                    <el-form-item label="关键词" prop="keywords">
                        <el-input v-model="queryParams.keywords" placeholder="请输入关键词" clearable />
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                    </el-form-item>
                </el-form>
                <el-row :gutter="10" class="mb8">
                        <el-col :span="1.5">
                            <el-button type="primary" v-hasPermi="['menu:add']" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
                        </el-col>
                        <el-col :span="1.5">
                            <el-button type="success" :disabled="single" v-hasPermi="['menu:edit']" plain icon="el-icon-edit" size="mini" @click="handleUpdate">修改</el-button>
                        </el-col>
                        <el-col :span="1.5">
                            <el-button type="danger" :disabled="multiple" v-hasPermi="['menu:delete']" plain icon="el-icon-delete" size="mini" @click="handleDelete">删除</el-button>
                        </el-col>
                    <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
                </el-row>

                <!-- 数据区域 -->
                <el-table :data="dataList" v-loading="loading" ref="table" border highlight-current-row @sort-change="sortChange" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="50" align="center"/>
<el-table-column prop="paMenuName" label="上级菜单" align="center" />
<el-table-column prop="menuType" label="类型" align="center">
    <template slot-scope="scope">
        <dict-tag :options="menu_type" :value="scope.row.menuType" />
    </template>
</el-table-column>
<el-table-column prop="menuName" label="菜单名称" align="center"  :show-overflow-tooltip="true" />
<el-table-column prop="orderNum" label="显示顺序" align="center"  />
<el-table-column prop="query" label="路由参数" align="center"  :show-overflow-tooltip="true" />
<el-table-column prop="visible" label="显示状态（0显示 1隐藏）" align="center"  :show-overflow-tooltip="true" />
<el-table-column prop="isFrame" label="是否外链" align="center">
    <template slot-scope="scope">
        <dict-tag :options="yes_no" :value="scope.row.isFrame" />
    </template>
</el-table-column>
<el-table-column prop="path" label="路由地址" align="center"  :show-overflow-tooltip="true" />
<el-table-column prop="component" label="组件路径" align="center"  :show-overflow-tooltip="true" />
<el-table-column prop="status" label="菜单状态" align="center">
    <template slot-scope="scope">
        <dict-tag :options="sys_show_hide" :value="scope.row.status" />
    </template>
</el-table-column>
<el-table-column prop="perms" label="权限字符串" align="center"  :show-overflow-tooltip="true" />
<el-table-column prop="menunameKey" label="菜单名key" align="center"  :show-overflow-tooltip="true" />
<el-table-column prop="routeName" label="路由名" align="center"  :show-overflow-tooltip="true" />

                    <el-table-column label="操作" align="center" width="140">
                        <template slot-scope="scope">
                                <el-button size="mini" v-hasPermi="['menu:edit']" type="text" icon="el-icon-edit" title="编辑" 
                                @click="handleUpdate(scope.row)">编辑</el-button>      
                                <el-button size="mini" v-hasPermi="['menu:delete']" type="text" icon="el-icon-delete" title="删除" 
                                @click="handleDelete(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <pagination class="mt10" background :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />

            </el-col>
        </el-row>
        <!-- 添加或修改系统菜单对话框 -->
        <el-dialog :title="title" :lock-scroll="false" :visible.sync="open" >
            <el-form ref="form" :model="form" :rules="rules" label-width="100px">
                <el-row :gutter="20" style="display: flex; flex-wrap: wrap;">
<el-col :lg="12">
    <el-form-item label="上级菜单" prop="parentId">
        <treeselect v-model="form.parentId" 
        :options="menuTreeFormOptions" 
        :normalizer="normalizer"
        :show-count="true" 
        :no-options-text="noOptionsText"
        :no-children-text="noChildrenText"
        :no-results-text="noResultsText"
        :loading-text="loadingText"
        placeholder="请选择上级菜单" />
    </el-form-item>
</el-col>
<el-col :lg="12">
    <el-form-item label="类型" prop="menuType">
        <el-select v-model="form.menuType" placeholder="请选择类型">
            <el-option v-for="item in menu_type" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue"></el-option>
        </el-select>
    </el-form-item>
</el-col>
<el-col :lg="12">
    <el-form-item label="菜单名称" prop="menuName">
        <el-input v-model="form.menuName" placeholder="请输入菜单名称" />
    </el-form-item>
</el-col>
<el-col :lg="12">
    <el-form-item label="显示顺序" prop="orderNum">
        <el-input-number v-model.number="form.orderNum" controls-position="right" placeholder="请输入显示顺序" />
    </el-form-item>
</el-col>
<el-col :lg="24" >
    <el-form-item label="图标" prop="icon">
            <el-popover placement="bottom-start" width="460" trigger="click" @show="$refs['iconIconSelect'].reset()">
                <IconSelect ref="iconIconSelect" @selected="iconIconSelected" />
                <el-input slot="reference" v-model="form.icon" placeholder="点击选择图标" clearable="" readonly>
                        <svg-icon v-if="form.icon" slot="prefix" :icon-class="form.icon" class="el-input__icon" style="height: 32px; width: 16px" />
                        <i v-else slot="prefix" class="el-icon-search el-input__icon"></i>
                </el-input>
            </el-popover>
    </el-form-item>
</el-col>
<el-col :lg="12">
    <el-form-item label="路由参数" prop="query">
        <el-input v-model="form.query" placeholder="请输入路由参数" />
    </el-form-item>
</el-col>
<el-col :lg="12">
    <el-form-item label="显示状态（0显示 1隐藏）" prop="visible">
        <el-input v-model="form.visible" placeholder="请输入显示状态（0显示 1隐藏）" />
    </el-form-item>
</el-col>
<el-col :lg="12">
    <el-form-item label="是否外链" prop="isFrame">
        <el-radio-group v-model="form.isFrame">
            <el-radio v-for="item in yes_no" :key="item.dictValue" :label="parseInt(item.dictValue)">{{item.dictLabel}}</el-radio>
        </el-radio-group>
    </el-form-item>
</el-col>
<el-col :lg="12">
    <el-form-item label="路由地址" prop="path">
        <el-input v-model="form.path" placeholder="请输入路由地址" />
    </el-form-item>
</el-col>
<el-col :lg="12">
    <el-form-item label="组件路径" prop="component">
        <el-input v-model="form.component" placeholder="请输入组件路径" />
    </el-form-item>
</el-col>
<el-col :lg="12">
    <el-form-item label="菜单状态" prop="status">
        <el-select v-model="form.status" placeholder="请选择菜单状态">
            <el-option v-for="item in sys_show_hide" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue"></el-option>
        </el-select>
    </el-form-item>
</el-col>
<el-col :lg="12">
    <el-form-item label="权限字符串" prop="perms">
        <el-input v-model="form.perms" placeholder="请输入权限字符串" />
    </el-form-item>
</el-col>
<el-col :lg="12">
    <el-form-item label="菜单名key" prop="menunameKey">
        <el-input v-model="form.menunameKey" placeholder="请输入菜单名key" />
    </el-form-item>
</el-col>
<el-col :lg="12">
    <el-form-item label="路由名" prop="routeName">
        <el-input v-model="form.routeName" placeholder="请输入路由名" />
    </el-form-item>
</el-col>
<el-col :lg="24">
    <el-form-item label="remark" prop="remark">
        <el-input type="textarea" v-model="form.remark" placeholder="请输入remark"/>
    </el-form-item>
</el-col>

                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="text" @click="cancel">取 消</el-button>
                <el-button type="primary" @click="submitForm">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>
<script>
    import { 
        getMenuPageList,
        getMenuDetail,
        addMenu,
        delMenu,
        modifyMenu,
        getMenuTreeSelectList
    } from '@/api/dev/base/menu.js';
    import Treeselect from '@riophae/vue-treeselect'
    import '@riophae/vue-treeselect/dist/vue-treeselect.css'
    import IconSelect from '@/components/IconSelect'

    export default {
        name: "menu",
        components: { Treeselect,IconSelect },
        data() {
            return {
                labelWidth: "100px",
                formLabelWidth:"100px",
                // 选中menuId数组
                ids: [],
                // 非单个禁用
                single: true,
                // 非多个禁用
                multiple: true,
                // 遮罩层
                loading: false,
                // 显示搜索条件
                showSearch: true,
                // 查询参数
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                    sort: undefined,
                    sortType: undefined,
                },
                menuTreeFormOptions: undefined,           
                treeFilterKeywords:undefined,
                menuTreeOptions:undefined,
                defaultTreeProps: {
                    children: 'children',
                    label: 'label',
                },
                noOptionsText: '暂无数据',
                noChildrenText: '暂无子项',
                noResultsText: '未找到匹配项',
                loadingText: '数据加载中...',
                // 弹出层标题
                title: "",
                // 操作类型 1、add 2、edit
                opertype: 0,
                // 是否显示弹出层
                open: false,
                // 表单参数
                form: {},
                columns: [
                    { index: 0, key: 'menuId', label: `菜单ID`, checked:  true  },
                    { index: 1, key: 'parentId', label: `上级菜单`, checked:  true  },
                    { index: 2, key: 'paMenuName', label: `上级`, checked:  true  },
                    { index: 3, key: 'menuType', label: `类型`, checked:  true  },
                    { index: 4, key: 'menuName', label: `菜单名称`, checked:  true  },
                    { index: 5, key: 'orderNum', label: `显示顺序`, checked:  true  },
                    { index: 6, key: 'query', label: `路由参数`, checked:  true  },
                    { index: 7, key: 'visible', label: `显示状态（0显示 1隐藏）`, checked:  true  },
                    { index: 8, key: 'isFrame', label: `是否外链`, checked:  true  },
                    { index: 9, key: 'path', label: `路由地址`, checked:  false  },
                    { index: 10, key: 'component', label: `组件路径`, checked:  false  },
                    { index: 11, key: 'status', label: `菜单状态`, checked:  false  },
                    { index: 12, key: 'perms', label: `权限字符串`, checked:  false  },
                    { index: 13, key: 'menunameKey', label: `菜单名key`, checked:  false  },
                    { index: 14, key: 'routeName', label: `路由名`, checked:  false  },
                ],
                // 类型选项列表 格式 eg:{ dictLabel: '标签', dictValue: '0'}
                menu_type: [],
                // 是否外链选项列表 格式 eg:{ dictLabel: '标签', dictValue: '0'}
                yes_no: [],
                // 菜单状态选项列表 格式 eg:{ dictLabel: '标签', dictValue: '0'}
                sys_show_hide: [],
                dataList: [],
                total: 0,
                rules: {
                    parentId: [{ required: true, message: "上级菜单不能为空", trigger: "blur" }],
                    menuType: [{ required: true, message: "类型不能为空", trigger: "change" }],
                    menuName: [{ required: true, message: "菜单名称不能为空", trigger: "blur" }],
                    orderNum: [{ required: true, message: "显示顺序不能为空", trigger: "blur" }],
                    icon: [{ required: true, message: "图标不能为空", trigger: "blur" }],
                    status: [{ required: true, message: "菜单状态不能为空", trigger: "change" }],
                },
            };
        },
        watch: {
            // 根据名称筛选树结点
            treeFilterKeywords(val) {
                this.$refs.tree.filter(val)
            },
        },
        created() {
            this.getMenuTreeSelectList()
            this.menuFormTreeOptionsQuery()
            // 列表数据查询
            this.getList();
            var dictParams = [
                "menu_type",
                "yes_no",
                "yes_no",
                "sys_show_hide",
            ];
            this.getDicts(dictParams).then((response) => {
                response.data.forEach((element) => {
                    this[element.dictType] = element.list;
                });
            });
        },
        methods: {
            iconIconSelected(name) {
                this.form.icon = name
            },
            normalizer(node) {
                return {
                    id: node.id,
                    label: node.label,
                    children: node.children,
                    isDisabled: node.isDisabled==true || node.isDisabled=='True'
                };
            },
            menuFormTreeOptionsQuery(){
                getMenuTreeSelectList({RootNodeName:'根结点',OnlyLevel1Node:false}).then((response) => {
                    this.menuTreeFormOptions = response.data
                })
            },
            getMenuTreeSelectList() {
                getMenuTreeSelectList({OnlyLevel1Node:false}).then((response) => {
                    this.menuTreeOptions = response.data
                })
            },
            // 节点单击事件
            handleNodeClick(data) {
                this.queryParams.treeNodeId = data.id
                this.queryParams.isDefaultNodeType=data.isDefaultNodeType
                this.getList()
            },
            // 筛选节点
            filterNode(value, data) {
                if (!value) return true
                return data.label.indexOf(value) !== -1
            },
            // 查询数据
            getList() {
                this.loading = true;
                getMenuPageList(this.queryParams).then(res => {
                    if (res.code == 200) {
                        this.dataList = res.data.result;
                        this.total = res.data.totalNum;
                        this.loading = false;
                    }
                })
            },

            // 取消按钮
            cancel() {
                this.open = false;
                this.reset();
            },
            // 重置数据表单
            reset() {
                this.form = {
                    menuId: undefined,
                    parentId: undefined,
                    menuType: undefined,
                    menuName: undefined,
                    orderNum: undefined,
                    icon: undefined,
                    query: undefined,
                    visible: undefined,
                    isFrame: undefined,
                    path: undefined,
                    component: undefined,
                    status: undefined,
                    perms: undefined,
                    menunameKey: undefined,
                    routeName: undefined,
                    remark: undefined,
                };
                this.resetForm("form");
            },
            // 重置查询操作
            resetQuery() {
                this.timeRange = [];
                this.resetForm("queryForm");
                this.queryParams.treeNodeId=undefined;
                this.handleQuery();
            },
            // 多选框选中数据
            handleSelectionChange(selection) {
                    this.ids = selection.map((item) => item.menuId);
                    this.single = selection.length != 1
                    this.multiple = !selection.length;
            },
            // 自定义排序
            sortChange(column) {
                    if (column.prop == null || column.order == null) {
                        this.queryParams.sort = undefined;
                        this.queryParams.sortType = undefined;
                    } else {
                        this.queryParams.sort = column.prop;
                        this.queryParams.sortType = column.order;
                    }

                    this.handleQuery();
            },
            /** 搜索按钮操作 */
            handleQuery() {
                this.queryParams.pageNum = 1;
                this.getList();
            },
            /** 新增按钮操作 */
            handleAdd() {
                this.reset();
                this.open = true;
                this.title = "添加";
                this.opertype = 1;
                this.form.parentId=this.queryParams.treeNodeId||0;
            },

            /** 删除按钮操作 */
            handleDelete(row) {
                    const Ids = row.menuId || this.ids;
                    var confirmTip='确认要删除数据项吗？';
                    if(row.dataName)
                    {
                            confirmTip='确认要删除数据项吗？';
                    }
                    this.$confirm(confirmTip)
                    .then(function () {
                        return delMenu({"Ids":Ids+''});
                    })
                    .then(() => {
                        this.handleQuery();
                        this.getMenuTreeSelectList();
                        this.msgSuccess("删除成功");
                    })
                    .catch(() => {});
            },

            /** 修改按钮操作 */
            handleUpdate(row) {
                this.reset();
                const id = row.menuId || this.ids;
                getMenuDetail(id).then((res) => {
                        const { code, data } = res;
                        if (code == 200) {
                                this.open = true;
                                this.title = "修改数据";
                                this.opertype = 2;
                                this.form = {
                                    ...data,
                                };
                        }
                    });
                },


                /** 提交按钮 */
                submitForm: function () {
                    this.$refs["form"].validate((valid) => {
                        if (valid) {
                            if (this.form.menuId != undefined && this.opertype === 2) {
                                modifyMenu(this.form)
                                    .then((res) => {
                                        this.msgSuccess("修改成功");
                                        this.open = false;
                                        this.getList();
                                        this.getMenuTreeSelectList();
                                    })
                            }
                            else {
                                addMenu(this.form)
                                    .then((res) => {
                                    this.msgSuccess("新增成功");
                                    this.open = false;
                                    this.getList();
                                    this.getMenuTreeSelectList();
                                })
                            }
                        }
                    });
                },

    },
};
</script>